<template>
    <div class="icons">
       <swiper :options="swiperOption">
        <swiper-slide v-for="(page,index) of pages" :key="index">
          <div class="icon" v-for="item of page" :key="item.id">
            <div  class="icon-img">
            <img class="icon-img-content"  :src="item.imgurl"/>
            </div>
            <p class="des">{{item.des}}</p>
          </div>
         </swiper-slide>
      </swiper >
    </div>
</template>
<script>
export default {
    name:"HomeIcons",
    props:['homeicon'],
    data () {
        return {
          swiperOption:{
            autoplay:false
          }
        }
    },
    computed: {
     pages () {
     const pages=[];
     this.homeicon.forEach((item,index)=>{
      const page=Math.floor(index/10);
      if(!pages[page]){
        pages[page]=[];
        }
        pages[page].push(item);
      })
      return pages
     }
  }
    
}
</script>
<style lang="stylus" scope>
@import "~styles/variable.styles"
@import "~styles/mixins.sty"
.icons>>>swiper-container 
    height:0;
    padding-bottom:30%;
.icon
    position:relative;
    height:0;
    width:20%;
    padding-bottom:15%;
    float:left;
    overflow:hidden;
    .icon-img
      postion:absolute;
      box-sizing:border-box;
      height:0;
      width:100%;
    .des
      position:absolute;
      left:0
      right:0
      bottom:0
      line-height:10px;
      height:10px;
      text-align:center;
      margin:0 auto !important;
      bottom:3px;
      color:$descolor;
      ellipsis()
      .icon-img-content
        width:100%;
</style>